<template>
    <ul class="footer">
        <router-link :to="item.path" tag="li" v-for="item in footNavList" :key="item.path">
            <i :class="['iconfont',item.icon]"></i>
            {{item.text}}
        </router-link>
    </ul>
</template>

<script>
import routes from '../../router/router.config';
export default {
    name:'foot',
    computed:{ //计算属性
        footNavList(){
            return routes.reduce((prev,cur) => {
                if(cur.footerNav){
                    prev = [
                        ...prev,
                        {
                            path:cur.path,
                            icon:cur.meta.icon,
                            text:cur.meta.title
                        }
                    ]
                }
                return prev
            },[]);
        }
    }
}
</script>

<style lang="scss" scoped>
    .footer{
        width:100%;
        height: 44px;
        display: flex;
        justify-content: space-around;
        text-align: center;
        border-top:1px solid gray;
        align-items: center;
        i{
            display: block;
        }
        .active{
            color:red;
        }
    }
</style>